<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 包含公共顶部文件 -->
    <th:block th:insert="common/cms_top"></th:block>

    <link rel="stylesheet" type="text/css" th:href="@{/css/myAccount.css}" />
    <script type="text/javascript" th:src="@{/js/jquery-3.5.1.min.js}"></script>

    <style>
        #usernameTips {
            display: inline-block;
            margin-left: 10px;
        }
        .okTips {
            color: green;
        }
        .errorTips {
            color: red;
        }
    </style>

    <script>
        $(function() {
            $('#username').on('blur', function() {
                $.ajax({
                    type: 'GET',
                    url: 'usernameExist?username=' + this.value,
                    success: function(data) {
                        if (data.trim() === 'Exist') {
                            $('#usernameTips').attr('class', 'errorTips').text('invalid username');
                        } else if (data.trim() === 'Not Exist') {
                            $('#usernameTips').attr('class', 'okTips').text('available username');
                        }
                    }
                });
            });
        });
    </script>
</head>

<body>
<img align="middle" class="background1" th:src="@{/images/white.jpg}" />

<div id="Catalog" class="Catalog">
    <form th:action="@{/cmsSave}" method="post">
        <p>User Information</p>
        <div class="Information">
            <i><img align="middle" src="/images/name.png" th:src="@{/images/name.png}" /></i>
            <label></label>
            <input class="user" type="text" name="firstname" th:value="${session.loginAccount.firstname}" /><br />

            <i><img align="middle" src="/images/name.png" th:src="@{/images/name.png}" /></i>
            <label></label>
            <input class="user" type="text" name="lastname" th:value="${session.loginAccount.lastname}" /><br />

            <i><img align="middle" src="/images/email.png" th:src="@{/images/email.png}" /></i>
            <label></label>
            <input class="user" type="text" name="email" th:value="${session.loginAccount.email}" /><br />

            <i><img align="middle" src="/images/phone.png" th:src="@{/images/phone.png}" /></i>
            <label></label>
            <input class="user" type="text" name="phone" th:value="${session.loginAccount.phone}" /><br />

            <i><img align="middle" src="/images/address.png" th:src="@{/images/address.png}" /></i>
            <label></label>
            <input class="user" type="text" name="address1" th:value="${session.loginAccount.addr1}" /><br />

            <i><img align="middle" src="/images/address.png" th:src="@{/images/address.png}" /></i>
            <label></label>
            <input class="user" type="text" name="address2" th:value="${session.loginAccount.addr2}" /><br />

            <i><img align="middle" src="/images/city.png" th:src="@{/images/city.png}" /></i>
            <label></label>
            <input class="user" type="text" name="city" th:value="${session.loginAccount.city}" /><br />

            <i><img align="middle" src="/images/city.png" th:src="@{/images/city.png}" /></i>
            <label></label>
            <input class="user" type="text" name="state" th:value="${session.loginAccount.state}" /><br />

            <i><img align="middle" src="/images/zip.png" th:src="@{/images/zip.png}" /></i>
            <label></label>
            <input class="user" type="text" name="zip" th:value="${session.loginAccount.zip}" /><br />

            <i><img align="middle" src="/images/country.png" th:src="@{/images/country.png}" /></i>
            <label></label>
            <input class="user" type="text" name="country" th:value="${session.loginAccount.country}" /><br />

            <i><img align="middle" src="/images/account.png" th:src="@{/images/account.png}" /></i>
            <label></label>
            <input id="username" class="user" type="text" name="username" th:value="${session.loginAccount.username}" /><br />
            <i><img align="middle" src="/images/password.png" th:src="@{/images/password.png}" /></i>  <input id="password" class="user" type="text" name="password" th:value="${session.loginAccount.password}" /><br />
            <span id="usernameTips"></span>
            <label></label><br />
        </div>
        <input type="submit" value="Save" />

    </form>
    <form th:action="@{/delete}" method="post">
        <input type="submit" value="Delete" />
    </form>
</div>
</body>
</html>

